<template>
    <div class="bottombar-box">
        <router-link to="HomePage" tag="div" class="item">
            <div class="iconfont">&#xe68a;</div>
            <div class="text">首页</div>
        </router-link>
        <router-link to="ClassificationPage" tag="div" class="item">
            <div class="iconfont">&#xe773;</div>
            <div class="text">分类</div>
        </router-link>
        <router-link to="ShoppingPage" tag="div" class="item">
            <div class="iconfont">&#xe6e6;</div>
            <div class="text">购物车</div>
        </router-link>
        <router-link to="UserPage" tag="div" class="item">
            <div class="iconfont">&#xe686;</div>
            <div class="text">关于我</div>
        </router-link>
    </div>
</template>

<script>
export default {
    
}
</script>

<style lang="less" scoped>
    .active>div{
        color: @light-pink;
    }
    .bottombar-box{
        height: @h;
        width: 100%;
        background: @white;
        position: absolute;
        bottom: 0px;
        border-top:1PX solid @99;
        display: flex;
        z-index: 100;
        .item{
            flex-grow: 1;
            text-align: center;
            font-size: 28px;
            .iconfont{
                margin-top:10px;
                font-size: 40px;
            }
        }
    }
</style>
